<template>
  <div>
    <button @click="isShow = !isShow">显示/隐藏元素</button>
    
    <transition name="yang">
    <div class="box" v-show="isShow"></div>
    </transition>
  </div>
  
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      isShow:true,
    }
  },
  }
  
</script>

<style scoped>
.box{
  width: 100px;
  height: 100px;
  background: red;
}


@keyframes fadeOut{
  from{
    opacity: 1;
  }

  to{
    opacity: 0;
  }
}

@keyframes fadeIn {
  from{
    opacity: 0;
  }
  50%{
    transform: translateX(100px);
  }
  to{
    opacity: 1;
  }
}

.yang-leave-active{
  animation: fadeOut 2s linear;
}
.yang-enter-active{
  animation: fadeIn 2s linear
}


</style>
